<template>
    <el-dialog :visible.sync="visible">
        <span slot="title">
            <h3 style="display: inline-block;">{{video.name}}</h3>
            <el-button @click="downloadFile(video)" type="primary" icon="el-icon-download" round>下载视频</el-button>
            <el-button @click="deleteVideo(video)" type="danger" icon="el-icon-delete" round>删除视频</el-button>
        </span>
        <el-form
                :model="video"
                label-width="90px"
                style="margin: auto;"
                :rules="rule"
                ref="form"
                v-loading="loadState"
                @submit.native.prevent
                @keyup.enter.native="sure"
        >
            <el-form-item label="视频名" prop="name">
                <el-input v-model="video.name"></el-input>
            </el-form-item>
            <el-form-item label="简介" prop="description">
                <el-input type="textarea" v-model="video.description"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer">
            <el-button @click="cancel">取 消</el-button>
            <el-button type="primary" @click="sure">确 定</el-button>
        </div>
    </el-dialog>
</template>

<script>
import merge from 'lodash/merge';
export default {
    name: "VideoEditor",
    props: {
        deleteVideoUrl: {
            type: String,
            default: "/video/rm/",
        },
        downloadUrl: {
            type:String,
            default: "/file/download",
        },
        changeFileUrl:{
            type:String,
            default:"/file/mv"
        },
    },
    mounted() {
        this.$on("open",this.open);
    },
    data(){
        return {
            video: {
                id: -1,
                name: "",
                description: "",
            },
            rule:{
                name:[{required:true,message:"必须要有一个名字",trigger:"blur"}],
            },
            loadState: false,
            visible: false,
        };
    },
    methods:{
        open(video){
            merge(this.video,video);
            this.visible = true;
        },
        async deleteVideo(file){
            this.loadState = true;
            try{
                await this.$http.delete(`${this.deleteVideoUrl}/${file.id}`);
                this.$message.success("删除成功");
                this.$emit("delete-success");
                this.visible = false;
            }catch (e) {
                console.log(e);
                let err = e;
                if(err.response&&err.response.hasOwnProperty("data"))err = err.response.data;
                this.$alert(e.message,"删除失败",{type:"error"});
            } finally {
                this.loadState = false;
            }
        },
        downloadFile(file){
            window.open(`${this.$http.defaults.baseURL}${this.downloadUrl}/${file.id}`);
            this.$alert("下载即将开始，请稍等片刻。如果无反应，您可以尝试重新点击下载按钮。","发起下载",{type:"success"});
            this.$emit("download-success");
        },
        async changeFileMeta(video){
            const formData = new FormData();
            const NAME_KEY = "name",DES_KEY = "description";
            formData.append(NAME_KEY,video.name);
            if(video.description&&video.description.length>0) formData.append(DES_KEY,video.description);
            formData.append("id",video.id);
            try {
                await this.$http.put(this.changeFileUrl,formData);
            }catch (e) {
                console.log(e);
                let err = e;
                if(err.response&&err.response.hasOwnProperty("data"))err = err.response.data;
                throw err;
            }
            return null;
        },
        cancel(){
            this.visible = false;
        },
        sure(){
            this.$refs.form.validate(valid=>{
                if(valid){
                    this.loadState = true;
                    this.changeFileMeta(this.video).then(()=>{
                        this.$message({
                            type: 'success',
                            message: '文件修改成功!'
                        });
                        this.$emit("change-success");
                        this.visible = false;
                    }).catch(err=>{
                        this.$alert(err.message, this.targetDir.name+' 修改失败!', {type:"error"});
                    }).finally(()=>{
                        this.loadState = false;
                    });
                }else{
                    this.$message({
                        showClose: true,
                        message: "请填写视频名",
                        type: "error"
                    });
                }
            });
        },
    }
}
</script>

<style scoped>

</style>
